<template>
  <div class="banner" style="text-align: center;color: white;line-height: 100px">
    <img src="../assets/banner.png" alt="banner" style="height: 100%;width: 100%">
  </div>
  <div style="padding-top:104px; display: flex; flex-direction: column; align-items: center">
    <div class="instruction">
      <div style="margin: 10px">
        欢迎来到 JX3 Logs，本网站旨在为《剑网三》提供战斗记录分析。使用《剑三警长》上传你的JCL战斗记录，后台将对其进行实时分析，根据收集的全局样本估算出战斗参与者的排名数据。
        同时本网站针对部分职业提供更为细致的复盘和评价等功能，如果您想参与某个职业模块的建设，请联系网站管理员！
      </div>
      <div style="margin: 10px">
        本网站正处于开发中，目前页面体现及功能并不一定为最终效果，请周知。
      </div>
      <div style="margin: 10px">
        目前已实现的功能有：心法数据统计、心法天梯榜、五奶复盘、rHPS算法、rDPS算法等。
      </div>
    </div>
    <div style="display: flex;justify-content: center" class="icon">
      <div style="text-align: center;margin:30px" @click="router.push('/dpsrank')">
        <img src="../assets/533.png">
        <div style="user-select: none;">数据统计</div>
      </div>
      <div style="text-align: center;margin:30px" @click="router.push('/ranking')" class="icon">
        <img src="../assets/337.png">
        <div style="user-select: none;">天梯榜</div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {reactive} from "vue";
import {useRouter} from "vue-router";
import Instance from '../components/Instance.vue'

const router = useRouter()

const getImgUrl = (name) => {
  return new URL(`../assets/${name}.png`, import.meta.url).href
}

const yxhy = reactive({
  chn_name:'河阳之战（25人英雄）',
  inst_pic:getImgUrl('heyang'),
  modules:[
    {'label':'首杀排行',
      'top3':[
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        }
      ]
    },
    {'label':'击杀速度',
      'top3':[
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        }
      ]
    },
    {'label':'通关评价',
      'top3':[
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        }
      ]
    },
    {'label':'全明星分数（输出）',
      'top3':[
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        }
      ]
    },
    {'label':'全明星分数（坦克）',
      'top3':[
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        }
      ]
    },
    {'label':'全明星分数（治疗）',
      'top3':[
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        }
      ]
    },
    {'label':'输出职业',
      'top3':[
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        }
      ]
    },
    {'label':'坦克职业',
      'top3':[
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        }
      ]
    },
    {'label':'治疗职业',
      'top3':[
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        },
        {
          'name':'角色名最长六@服务器名',
          'server':'服务器名（大区名）',
          'score':'9999999',
          'link':''
        }
      ]
    }
  ]
    })

const pthy = reactive({
      chn_name:'河阳之战（25人普通）',
      inst_pic:getImgUrl('heyang'),
      modules:[
        {'label':'首杀排行',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        },
        {'label':'击杀速度',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        },
        {'label':'通关评价',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        },
        {'label':'全明星分数（输出）',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        },
        {'label':'全明星分数（坦克）',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        },
        {'label':'全明星分数（治疗）',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        },
        {'label':'输出职业',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        },
        {'label':'坦克职业',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        },
        {'label':'治疗职业',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        }
      ]
    })

const yxly = reactive({
      chn_name:'雷狱大泽（25人英雄）',
      inst_pic:getImgUrl('leiyu'),
      modules:[
        {'label':'首杀排行',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        },
        {'label':'击杀速度',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        },
        {'label':'通关评价',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        },
        {'label':'全明星分数（输出）',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        },
        {'label':'全明星分数（坦克）',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        },
        {'label':'全明星分数（治疗）',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        },
        {'label':'输出职业',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        },
        {'label':'坦克职业',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        },
        {'label':'治疗职业',
          'top3':[
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            },
            {
              'name':'角色名最长六@服务器名',
              'server':'服务器名（大区名）',
              'score':'9999999',
              'link':''
            }
          ]
        }
      ]
    })
</script>

<style scoped>
.banner{
  position: absolute;
  left: 0;
  right: 0;
  top: 64px;
  border-bottom: 1px solid #555;
  height: 100px;
}
.instruction{
  color: #e1f2f5;
  font-size: 18px;
  background-color: #141414;
  margin-bottom: 20px;
  width: 1200px;
  border: 1px solid #555;
}
.icon :hover{
  transition: transform 0.2s ease-out;
  transform: scale(1.1);
}
</style>